<template>
  <el-dialog
    :close-on-click-modal="false"
    :title="title"
    width="660px"
    :visible.sync="visible"
    @cancel="close"
  >
    <div v-loading="loading">
      <el-form ref="form" label-width="80px" :rules="rules" size="medium" :model="form">
        <el-form-item prop="name" label="权限名称">
          <el-input v-model="form.name" placeholder="请填入内容" />
        </el-form-item>

        <el-form-item prop="groupId" label="所属分组">
          <el-select v-model="form.groupId" style="width: 540px" placeholder="请选择">
            <el-option
              v-for="item in groupList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>

        <el-form-item prop="description" label="权限描述">
          <el-input v-model="form.description" placeholder="请填入内容" />
        </el-form-item>

        <el-form-item prop="remark" label="备注">
          <el-input v-model="form.remark" placeholder="请填入内容" />
        </el-form-item>
        <el-form-item prop="ranking" label="排序">
          <el-input v-model="form.ranking" placeholder="请填入内容" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button class="cancelBtn" @click="close">放弃</el-button>
        <el-button type="primary" :loading="loading" @click="handleSave">确定</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import {
  addGroupPerm,
  updateGroupPerm
} from '@/api/perm'

export default {
  name: 'PermFormDialog',
  props: {
    scope: {
      type: Number,
      require: true
    }
  },
  data() {
    return {
      loading: false,
      visible: false,
      title: '',
      mode: '',
      reject: null,
      resolve: null,
      permId: null,
      groupList: [],
      form: {
        name: null,
        description: null,
        remark: null,
        groupId: null,
        ranking: 10
      },
      rules: {
        name: [{
          required: true,
          message: '请输入权限名',
          trigger: 'blur'
        }],
        groupId: [{
          required: true,
          message: '请选择分组',
          trigger: 'blur'
        }],
        description: [{
          required: true,
          message: '请输入权限描述',
          trigger: 'blur'
        }]
      }
    }
  },
  methods: {
    defaultForm() {
      return {
        name: null,
        description: null,
        remark: null,
        groupId: null,
        ranking: 10
      }
    },
    add(groupId, groupList) {
      return new Promise((resolve, reject) => {
        this.resolve = resolve
        this.reject = reject
        this.visible = true
        this.groupList = groupList
        this.mode = 'add'
        this.title = '添加权限'
        this.form = this.defaultForm()
        this.form.groupId = groupId
      })
    },
    edit(perm, groupList) {
      return new Promise((resolve, reject) => {
        this.resolve = resolve
        this.reject = reject
        this.visible = true
        this.groupList = groupList
        this.mode = 'edit'
        this.title = '编辑权限'
        this.form = {
          name: perm.name,
          description: perm.description,
          remark: perm.remark,
          groupId: perm.groupId,
          ranking: perm.ranking
        }
        this.permId = perm.id
      })
    },
    close() {
      this.visible = false
      this.resolve = null
      this.reject = null
      this.$refs.form.resetFields()
    },
    handleSave() {
      this.$refs.form.validate(valid => {
        if (valid) {
          const data = this.form
          if (this.mode === 'add') {
            this.loading = true
            addGroupPerm(this.scope, data).then((resp) => {
              this.loading = false
              if (resp.code === 0) {
                this.$notify({ title: '成功', message: '添加成功', type: 'success', duration: 2000 })
                this.resolve && this.resolve()
                this.close()
              }
            }).catch(() => {
              this.loading = false
            })
          } else {
            this.loading = true
            data['id'] = this.permId
            updateGroupPerm(this.scope, data).then((resp) => {
              this.loading = false
              if (resp.code === 0) {
                this.$notify({ title: '成功', message: '修改成功', type: 'success', duration: 2000 })
                this.resolve && this.resolve()
                this.close()
              }
            }).catch(() => {
              this.loading = false
            })
          }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
	::v-deep .el-input--medium .el-input__inner:focus{
		border-color: $btnBgc;
	}
	.el-select-dropdown__item.selected{
		color: $btnBgc;
	}
	.el-button--primary{
		background-color: $btnBgc;
		border-color: $btnBgc;
	}
	.el-button--primary:hover{
		opacity: 0.5;
	}
	.cancelBtn:hover{
		background-color: $btnBgc;
		border-color: $btnBgc;
		color: white;
	}
	.el-dialog__headerbtn .el-dialog__close:hover{
		color: $btnBgc;
	}
</style>
